<template>
	<view>
		<view class="header" v-if="!loginState">
			<image class="avatar" :src="avatar"></image>
			<view @click="goLogin()">
				<view class="title">登录/注册</view>
				<view>点击登录，查看更多精彩内容</view>
			</view>
		</view>
		
		<view class="header" v-if="loginState" @click="goLink('settings')">
			<image class="avatar" :src="userInfo.userInfo.image"></image>
			<view style="width:40%;">
				<view class="title">{{userInfo.userInfo.nickName}}</view>
				<view >{{shopName}}</view>
			</view>
			<!-- <view class="studentCard">
			   <image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/card.png" class="icon"></image> 学生证
			</view> -->
		</view>
		
		
		<view class="commonArea" v-if="loginState" style="justify-content: space-around;">
			<view><view class="digital">{{userInfo.userInfo.accumulatePoints}}</view><view>我的积分</view></view>
			<view><view class="digital">{{userInfo.userInfo.signIntegral}}</view><view>奖励积分</view></view>
			<!-- <view><view class="digital">0</view><view>学习时长</view></view> -->
		</view>
		
		<view class="commonArea">
			<view  v-for='itm in menu1' @click="goLink(itm.url)" class="menu-item">
				<image :src="itm.icon" mode="widthFix" style="width: 30px;"></image>
				<view>{{itm.title}}</view>
			</view>
		</view>
		<view class="commonArea1">
			<view  @click="Jumpmyclass()" class="menu-item" v-if="userInfo.userInfo.roles.includes('teacher')===true">
				<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/wdbj@2x.png"  mode="widthFix" style="width: 30px;"></image>
				<view>我的班级</view>
			</view>
			<view  @click="Jumpleave()" class="menu-item" v-if="userInfo.userInfo.roles.includes('teacher')===true">
				<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/sp@2x.png"  mode="widthFix" style="width: 30px;"></image>
				<view>请假审批</view>
			</view>
			<view  @click="JumpMessge()" class="menu-item" v-if="userInfo.userInfo.roles.includes('teacher_leader')===true">
				<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/jwtz@2x.png"  mode="widthFix" style="width: 30px;"></image>
				<view>教务通知</view>
			</view>

			<!-- <view class="menu-item" @tap="jumpset">
				<image src="../../static/56bcd44ebfa1747e66f07cdf985ea34.png"  mode="widthFix" style="width: 30px;"></image>
				<view>设置</view>
			</view> -->
		</view>
		
	</view>
	
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		computed: mapState(['loginState', 'userInfo']),
		data() {
			return {
				shopName:'',
				hadLogin:0,
				avatar:'https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/default.png',
				menu1:[
					 {'title':'充值积分',url:'recharge',icon:'https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/czjf@2x.png'},
					 {'title':'课程订单',url:'order',icon:'https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/kcdd@2x.png'},
					 {'title':'请假单',url:'leave',icon:'https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/qj@2x.png'},
					 {'title':'设置',url:'set',icon:'../../static/sz@2x.png'},
					 
					 
				],
				menu2:[
					{'title':'我的班级',url:'class',icon:'https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/wdbj@2x.png'},
					{'title':'请假审批',url:'leave_approval',icon:'https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/sp@2x.png'},
					{'title':'教务通知',url:'edu_notice',icon:'https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/jwtz@2x.png'},
					
				],
				// userInfo:{}
			}
		},
	    onShow() {
	    	this.getUserInfo()
	    },
		onLoad() {
			this.shopName = uni.getStorageSync('shopName')
			// var hadLogin = uni.getStorageSync("hadLogin");
			// if(hadLogin){
			// 	this.hadLogin = 1;
			// 	this.userInfo = {'avatar':'https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/tmp/a1.png', title:'王先生', desc:'夕阳红老年学堂'};   //TODO:::根据token从接口里获取用户的资料信息
			// }
		},
		methods: {
			...mapMutations(['login', 'logout','setUserInfo']),
			// 获取用户信息
			getUserInfo() {
				this.$api.getUserInfo().then((res) => {
					let userInfo = res.data.dataMap
					// this.getUserIn = res.data.dataMap
					console.log(userInfo)
					if (userInfo != null) {
						this.setUserInfo(userInfo)
					}
			
				})
			
			},
			Jumpmyclass(){
				uni.navigateTo({
					url:'class'
				})
			},
			Jumpleave(){
				debugger
				if(!this.loginState){
					this.goLogin()
				}
				uni.navigateTo({
					url:'leave_approval'
				})
			},
			JumpMessge(){
				uni.navigateTo({
					url:'edu_notice'
				})
			},
			jumpset(){
				uni.navigateTo({
					url:'set'
				})
			},
			goLogin(){
				uni.navigateTo({
					url:'auth'
				})
			},
			goLink(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="scss">
	page{background: #F8F8F8;}
	.icon{margin-right: 2px;}
   .header{background: url(); background-size:cover;
       display: flex;
	   align-items: center;
	   color:white;
	   height: 230rpx;
	   padding-top:50px;
	   .title{font-weight: bold;font-size: 30rpx;margin-bottom: 10px;}
      .avatar{height: 70px;width:70px;border-radius:50%;margin:0 10px;}
   }
   .commonArea{
	   display: flex;
	   background: white;
	   border-radius: 10px;
	   align-items: center;
	   color:gray;
	   text-align: center;
	   padding: 10px 0 ;
	   height: 50px;
	   margin:10px;
	   .digital{
		   font-weight: bold;
		   font-size:34rpx;
		   margin-bottom: 5px;
		   color: black;
	   }
	   .menu-item{
		   width: 25%;
	   }
   }
   .commonArea1{
   	   display: flex;
   	   background: white;
   	   border-radius: 10px;
   	   align-items: center;
   	   color:gray;
   	   text-align: center;
   	   // padding: 10px 0 ;
   	   // height: 50px;
   	   margin:10px;
   	   .digital{
   		   font-weight: bold;
   		   font-size:34rpx;
   		   margin-bottom: 5px;
   		   color: black;
   	   }
   	   .menu-item{
		   padding: 10px 0 ;
   		   width: 25%;
   	   }
   }
   .studentCard{
	   border-radius: 50px;
	   color:white;
	   padding:3px 10px;
	   text-align: center;
	   border:1px solid;
   }
</style>
